<template>
	<view>
		<cu-custom bgColor="bg-yellow" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">排行榜</block>
		</cu-custom>
		
		<view class="whole-box">
			<view class="gold-black-box">
				<view class="top-box">
					<image class="top-box-bg" v-if="longhubang_img" :src="longhubang_img" mode="aspectFill"></image>
					<image class="top-box-bg" v-else src="../../static/member-back.png" mode="aspectFill"></image>
					<!-- <view class="top-box-content">
						<image class="avatar" :src="member.head_portrait" mode="aspectFill"></image>
					</view>
					<image class="white-cup" src="@/static/white-cup.png"></image> -->
				</view>
				
				<view class="my-data-box-content">
					<view class="status-box">
						<text :class="cur==0?'cur':''" @tap="changeStatus(0)">团队业绩</text>
						<text :class="cur==1?'cur':''" @tap="changeStatus(1)">团队订单</text>
						<text :class="cur==2?'cur':''" @tap="changeStatus(2)">个人业绩</text>
						<text :class="cur==3?'cur':''" @tap="changeStatus(3)">个人订单</text>
					</view>
					<view class="list">
						<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
							<block v-for="(item,index) in list" :key="index" v-if="list != ''">
								
						
							<view class="list-item">
								<image class="award" src="@/static/award-1.png" v-if="index == 0"></image>
								<image class="award" src="@/static/two-px.png" v-if="index == 1"></image>
								<image class="award" src="@/static/three-px.png" v-if="index == 2"></image>
								<text class="no-award" v-if="index > 2">{{index+1}}</text>
								<image class="avatar" :src="item.member.head_portrait"></image>
								<text class="name">[{{item.member.memberLevel ? item.member.memberLevel.name :'无等级'}}]{{item.member?item.member.nickname:'无名'}}</text>
								<text class="num text-bold" v-if="cur == 0 ">{{item.team_money}}元</text>
								<text class="num text-bold" v-if="cur == 1 ">{{item.team_count}}单</text>
								<text class="num text-bold" v-if="cur == 2 ">{{item.order_money}}元</text>
								<text class="num text-bold" v-if="cur == 3 ">{{item.order_count}}单</text>
							</view>
							</block>
							
				
							
							
							<block v-if="list.length == 0">
								<view style="color: #000000;padding: 10px; text-align: center;">暂无数据</view>
							</block>
							<view v-else class="cu-load margin-center text-grey" :class="loading?'loading':'over'"></view>
						</scroll-view>
					</view>
				</view>
		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				statistics: null,
				member:null,
				cur: 0,
				scrollHeight: 600,
				teamInfo:null,
				loading:false,
				hasMore:true,
				page:1,
				list:[],
				longhubang_img:'',
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
				})
				this.top_list_longhubang()
				this.getList(this.cur)
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.status-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom
					
				})
			},
			top_list_longhubang(){
				this.$http
					.get('top_list_longhubang', {})
					.then((response) => {
						this.longhubang_img = response.data.data
					})
					.catch((response) => {
						console.log(response)
					})
			},
			changeStatus(i){
				this.cur = i
				this.list=[],
				this.hasMore= true,
				this.loading=false,
				this.page=1,
				this.getList(this.cur)
			},
			getList(cur){
				console.log(cur)
				if (this.hasMore && !this.loading) {
					uni.showLoading({
						'title':'加载中...'
					})
					this.$http
						.get('top_list', {
							type: this.cur,
							page: this.page,
						})
						.then((response) => {
							console.log(response)
							this.loading = false
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							uni.hideLoading()
							this.list = list
							this.page += 1
							this.getScrollH()
							// console.log(this.teamInfo.levelData[index].obj)
							this.$forceUpdate()
							
						})
						.catch((response) => {
							console.log(response)
						})
				}
			},
			getMore(){
				this.getList(this.cur)
			},
		},
	}
</script>

<style>
	page{
		min-height: 100vh;
		background-color: #FFFFFF;
	}
	.whole-box{
		min-height: calc(100vh - 45px);
		width: 100%;
	}
	.gold-black-box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		width: 100%;
		height: 334rpx;
		overflow: hidden;
		position: relative;
		/* background-color: #FFF5C7; */
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 750rpx;
		height: 334rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top-box-content .avatar{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-box .white-cup{
		position: absolute;
		top: 130rpx;
		left: 130rpx;
		height: 74rpx;
		width: 76rpx;
	}
</style>

<style>
	.my-data-box-content{
		margin: 0 40rpx;
		width: 670rpx;
	}
	.my-data-box-content .status-box{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1rpx solid #999999; */
	}
	.status-box text{
		width: 280rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		background-color: #E0E0E0;
		border-radius: 27rpx;
		font-size: 30rpx;
		/* font-weight: bold; */
		color: #725300;
	}
	.status-box text.cur{
		background-color: #1A181E;
		font-weight: bold;
		color: #ffffff!important;
		
	}
	
	.my-data-box-content .list{
		
	}
	
	.my-data-box-content .list .list-item{
		height: 150rpx;
		border-bottom: 1rpx solid #E0E0E0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list-item .award{
		width: 50rpx;
		height: 82rpx;
		margin-left: 10rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.list-item .no-award{
		width: 50rpx;
		margin-left: 10rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
		text-align: center;
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
	}
	.list-item .avatar{
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	.list-item .name{
		flex: 1;
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
	}
	.list-item .num{
		font-size: 28rpx;
		color: #000000;
		margin-left: 10rpx;
		margin-right: 30rpx;
	}
</style>

